<template>
  <div>
    <section class="shortcut w">
      <div>
        <div class="fl">
          <ul>
            <li class="Logo"><router-link
              :to="{path: '/', name: 'user'}"
            >书城Logo</router-link></li>
            <li><router-link
              :to="{path: '/shoppingCar', name: 'userShopCar'}"
            >我的购物车</router-link> &nbsp; </li>
            <li><router-link
              :to="{path: '/booksOrder', name: 'userBookOrder'}"
            >订单管理</router-link> &nbsp; </li>
          </ul>
        </div>
      </div>
    </section>
    <div class="w">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          align="left"
          fixed="left"
          label="商品信息"
          width="325px"
        >
          <template slot-scope="scope">
            <div class="orderTime" />
            <img
              :src="scope.row.book.cover"
              :style="{ width: '140px', height: '140px'}"
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="金额"
          width="500"
        >
          <template slot-scope="scope">
            <div class="orderTime">下单时间：{{ scope.row.time }}</div>
            <span style="color: red; font-weight: bold; font-size: 18px">￥ {{ scope.row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="订单状态"
          width="300"
        >
          <template slot-scope="scope">
            <div class="orderTime" />
            <span style="font-weight: bold; color: #000">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="300"
        >
          <template slot-scope="scoped" style="color: #337ab7">
            <div class="orderTime" />
            <router-link
              :to="{
                path: '/bookInfo',
                name: 'userBookInfo',
                query: {
                  id: scoped.row.book.id,
                }
              }"
            >查看</router-link>
            <br>
            <el-link :underline="false" @click="Delete()">取消</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="success" style="float: right; margin-top: 50px" :plain="true" @click="messageBox(), clickHandler($event)">一键支付</el-button>
      <div style=" float:left; margin-top: 200px; height: 1px; width: 1px" />
    </div>
  </div>
</template>

<script>
import userApi from '@/api/user'
export default {
  data() {
    return {
      tableData: [{
        goodsInfo: '2016-05-02',
        picture: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        status: '等待付款',
        money: 5,
        handle: '支付',
        time: '2021-3-27'
      }, {
        goodsInfo: '2016-05-02',
        picture: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        status: '等待付款',
        money: 5,
        handle: '支付',
        time: '2021-3-27'
      }, {
        goodsInfo: '2016-05-02',
        picture: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        status: '等待付款',
        money: 5,
        handle: '支付',
        time: '2021-3-27'
      }],
      user: false,
      userId: 0

    }
  },
  created:
    async function() {
      this.userId = window.sessionStorage.getItem('token')
      await this.initData()
    },
  methods: {
    getOrder() {
      return new Promise(resolve => {
        userApi.getAllOrder(this.userId).then(resp => {
          resolve(resp.data.data)
        }, err => {
          console.log(err)
        })
      })
    },
    // async+await  同步请求  避免axios嵌套
    async initData() {
      this.tableData = []
      var bookIds = []
      var order = await this.getOrder()
      var orderItems = order['error']
      // 添加部分缺失属性，获取最终完整图书对象
      for (var bookArray in orderItems) {
        orderItems[bookArray].forEach(bookInfo => {
          bookIds.push({ id: bookInfo.bookId, num: bookInfo.bookNumber, time: bookInfo.orderTime })
        })
      }
      bookIds.forEach(item => {
        userApi.getBookById(item.id).then(resp => {
          this.tableData.push({ book: resp.data.data[item.id], num: item.num, total: resp.data.data[item.id].price * item.num, status: '未付款', time: item.time }) // 根据id将图书信息存入tableData
        }, err => {
          console.log(err)
        })
      })
      // 清空bookIds
      bookIds = []
      // 将已付款的加入tableData
      orderItems = order['ok']
      for (bookArray in orderItems) {
        orderItems[bookArray].forEach(bookInfo => {
          bookIds.push({ id: bookInfo.bookId, num: bookInfo.bookNumber, time: bookInfo.orderTime })
        })
      }
      bookIds.forEach(item => {
        userApi.getBookById(item.id).then(resp => {
          this.tableData.push({ book: resp.data.data[item.id], num: item.num, total: resp.data.data[item.id].price * item.num, status: '已付款', time: item.time }) // 根据id将图书信息存入tableData
        }, err => {
          console.log(err)
        })
      })
    },
    async messageBox() {
      const order = await this.getOrder()
      var orderItems = order['error']
      for (var bookArray in orderItems) {
        userApi.orderUpdateStatus(bookArray).then(resp => {

        }, err => {
          console.log(err)
        })
      }
      await this.initData()
      this.$message({
        message: '支付成功！',
        type: 'success',
        duration: 2000
      })
    },
    // 暂无删除购物车内图书接口
    Delete() {
      console.log('delete')
    }

  }

}
</script>

<style scoped>
.orderTime {
  position: absolute;
  top: 0;
  /* width: 100%; */
  width: 500px;
  height: 30px;
  line-height: 30px;
  padding-left: 0;
  color: #000;
  background-color: #e3e3e3;
}
</style>
